<template>
  <div class="base-layer" @mousedown="move" id="layerControl_zw">
    <div class="title">选择底图
      <div class="title-btn" @click="close">X</div>
    </div>
    <ul class="base-layer-layers">
      <li
        v-for="(item,index) in baseLayers"
        :key="index"
        @click="switchLayer(item)"
        @mousedown="stopCapture"
      >
        <img
          src="http://www.5tu.cn/attachments/month_1306/1306041041b4fe2ed886ff8f50.jpg"
          width="64px"
          :class="{'layer-status':item.curLayer}"
        >
        <div :class="{'text':true,'text-status':item.curLayer}">{{item.layerName}}</div>
      </li>
    </ul>
    <!-- 分割线-------------------分割线---------------分割线 -->
    <div>
      <div class="other-title" @click="overLayersListVisible=!overLayersListVisible">专题图
        <div class="other-title-btn">
          <i class="el-icon-arrow-right" v-if="!overLayersListVisible"></i>
          <i class="el-icon-arrow-down" v-if="overLayersListVisible"></i>
        </div>
      </div>
      <ul class="other-layer-layers" v-if="overLayersListVisible">
        <li
          v-for="(item,index) in overLayerData"
          :key="index"
          @click.stop="setSelectedStatus($event,item,index)"
          :class="{'is-selected-status':item.tryOpacity}"
          @mousedown="stopCapture"
        >
          {{item.name}}
          <span class="check-box">
            <i
              class="iconfont icon-shangyi overlayer-visible"
              @click.stop="setLayerUp(item,index,true)"
            ></i>
            <i
              class="iconfont icon-xiayi overlayer-visible"
              @click.stop="setLayerUp(item,index,false)"
            ></i>
            <i
              class="iconfont icon-yanjing overlayer-visible"
              @click.stop="setOverLayerHidden(item,index)"
              v-if="!item.hidden"
            ></i>
            <i
              class="iconfont icon-biyanjing overlayer-visible"
              @click.stop="setOverLayerVisible(item,index)"
              v-if="item.hidden"
            ></i>
          </span>
        </li>
      </ul>
    </div>
    <!-- 分割线-------------------分割线---------------分割线 -->
    <div @mousedown="stopCapture">
      <div class="other-title line-top" @click="opacitySliderVisible=!opacitySliderVisible">透明度
        <div class="other-title-btn">
          <i class="el-icon-arrow-right" v-if="!opacitySliderVisible"></i>
          <i class="el-icon-arrow-down" v-if="opacitySliderVisible"></i>
        </div>
      </div>
      <div class="other-layer-layers" style="padding:0 18px 0px 10px" v-if="opacitySliderVisible">
        <el-slider
          v-model="layersOpacity"
          :max="100"
          :min="0"
          :step="1"
          @change="setOverLayersOpacity"
          @mousedown="stopCapture"
        ></el-slider>
      </div>
    </div>
  </div>
</template>

<script>
import sgisLayerBase from '@/utils/map/sgis.layer.base.js'
import sgisMapBase from '@/utils/map/sgis.map.base.js'
import Layer from '@/utils/map/lib/main.js' // 专题图层绘画函数
import { setTimeout } from 'timers'
export default {
  name: 'Layers',
  props: ['overLayerData'],
  data () {
    return {
      baseLayers: sgisLayerBase.baseLayers,
      overLayersListVisible: false, // 专题图层列表可见性
      overLayers: sgisLayerBase.overLayers, // 获取当前的overLayers个数
      overLayerChangeByCurControl: false, // 记录专题专题图层个数变更原因
      opacitySliderVisible: false, // 透明度滑块是否可见
      layersOpacity: 100, // 专题图层透明度
      otherLegends: []
    }
  },
  mounted () {
    setTimeout(() => {
      this.baseLayers = sgisLayerBase.baseLayers
      for (const key in this.baseLayers) {
        this.baseLayers[key].curLayer = false
      }
      this.baseLayers[0].curLayer = true
      this.drawOverLayer()
    }, 1000)
  },
  methods: {
    setLayerUp (item, index, isUp) {
      if (isUp) {
        if (index === 0) {
          return
        }
        this.overLayerData.splice(index - 1, 0, item)
        this.overLayerData.splice(index + 1, 1)
        const layerInfo = sgisLayerBase.getOverLayerById(item.layerId)
        layerInfo.layer.setZIndexOffset(1)
      } else {
        if (index === this.overLayerData.length - 1) {
          return
        }
        this.overLayerData.splice(index, 1)
        this.overLayerData.splice(index + 1, 0, item)
        const layerInfo = sgisLayerBase.getOverLayerById(item.layerId)
        layerInfo.layer.setZIndexOffset(-1)
      }
    },
    setOverLayersOpacity () {
      const opacity = this.layersOpacity / 100
      this.overLayerData.forEach(item => {
        if (item.tryOpacity) {
          for (const value of this.overLayers) {
            // 寻找待设置透明度图层
            if (value.layerId === item.layerId) {
              // 寻找待设置透明度图层
              value.layer.setOpacity(opacity)
            }
          }
        }
      })
    },
    setSelectedStatus (el, item, index) {
      this.overLayerData.forEach(item => {
        item.tryOpacity = false
      })
      // 设置那条数据可以设置透明度属性
      item.tryOpacity = true
      this.$set(this.overLayerData, index, item)
    },
    setOverLayerVisible (item, index) {
      const layerInfo = sgisLayerBase.getOverLayerById(item.layerId)
      item.hidden = false
      this.$set(this.overLayerData, index, item)
      layerInfo.layer.setVisible('visible')
      layerInfo.layer.setOpacity(1)
      this.otherLegends.push(layerInfo)
      this.$emit('getOtherLegendVisible', this.otherLegends)
    },
    setOverLayerHidden (item, index) {
      const layerInfo = sgisLayerBase.getOverLayerById(item.layerId)
      item.hidden = true
      this.$set(this.overLayerData, index, item)
      layerInfo.layer.setVisible('hidden')
      layerInfo.layer.setOpacity(0)
      for (const key in this.otherLegends) {
        const item = this.otherLegends[key]
        if (item.layerId === layerInfo.layerId) {
          this.otherLegends.splice(key, 1)
          break
        }
      }
      this.$emit('getOtherLegendHidden', this.otherLegends)
    },
    drawOverLayer () {
      for (const key in this.overLayerData) {
        const item = this.overLayerData[key]
        const type = item.type
        const data = item.data ? item.data : item.datas
        const map = sgisMapBase.getMap()
        const layerInfo = Layer[type].createLayer(map, data)
        item.layerId = layerInfo.layerId
        this.setOverLayerHidden(item, key)
      }
    },
    switchLayer (item) {
      for (const key in this.baseLayers) {
        this.baseLayers[key].curLayer = false
        this.$set(this.baseLayers, key, this.baseLayers[key])
        if (item.layerId === this.baseLayers[key].layerId) {
          this.baseLayers[key].curLayer = true
          this.$set(this.baseLayers, key, this.baseLayers[key])
        }
      }
      sgisLayerBase.switchBaseLayer(item.layerId)
    },
    close () {
      this.$emit('close')
    },
    stopCapture (e) {
      e.stopPropagation()
      e.stopImmediatePropagation()
    },
    move (e) {
      // let odiv = e.target; //获取目标元素
      e.stopPropagation()
      e.stopImmediatePropagation()
      const odiv = document.getElementById('layerControl_zw')
      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft
      const disY = e.clientY - odiv.offsetTop
      document.onmousemove = e => {
        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        const left = e.clientX - disX
        const top = e.clientY - disY

        // 绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        // 移动当前元素
        odiv.style.position = 'absolute'
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'
      }
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}
</script>

<style rel='stylesheet' lang='scss' scoped>
@import "./../../assets/css/rule.scss";
$activeColor: #eaf1fb;
.base-layer {
  width: 281px;
  min-height: 300px;
  background: $backGroundColor;
  color: $fontColor;
  border-radius: 5px;
  position: fixed;
  right: 52px;
  top: 45%;
  z-index: 999;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  padding: 5px;
  .title {
    padding: 5px;
    font-weight: bold;
    .title-btn {
      float: right;
      cursor: pointer;
    }
  }
  ul.base-layer-layers {
    padding: 5px 0;
    margin: 0;
    border-top: 1px solid $borderColor;
    border-bottom: 1px solid $borderColor;
    li {
      list-style: none;
      display: inline-block;
      width: 90px;
      cursor: pointer;
      text-align: center;
      .text {
        width: 100%;
        font-size: 12px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .layer-status {
        border: 2px solid $borderColorActive;
      }
      .text-status {
        color: $borderColorActive;
      }
    }
  }
  .other-title {
    padding: 5px 15px 5px 5px;
    cursor: pointer;
    .other-title-btn {
      float: right;
    }
  }
  .line-top {
    border-top: 1px solid $borderColor;
  }
  // .other-title:hover {
  //   background: $activeColor;
  // }
  .other-layer-layers {
    margin: 0;
    padding: 0;
    max-height: 130px;
    overflow-y: auto;
    li {
      list-style: none;
      padding: 5px 15px 5px 10px;
      // font-size: 14px;
      color: $fontColorLimit;
      .check-box {
        float: right;
        cursor: pointer;
        input[type="checkbox"] {
          cursor: pointer;
        }
      }
    }
    li:hover {
      background: $activeColor;
    }
    .is-selected-status {
      background: $activeColor;
    }
  }
}
</style>
<style rel='stylesheet' lang='scss'>
@import "./../../assets/css/rule.scss";
$activeColor: #eaf1fb;
.base-layer {
  .el-slider__bar {
    background: $borderColorActive;
  }
  .el-slider__button-wrapper {
    width: 14px;
    height: 14px;
    top: -6px;
  }
  .el-slider__button {
    width: 14px;
    height: 14px;
  }
  .el-slider__runway {
    margin: 12px 0;
    height: 4px;
  }
  .el-slider__bar {
    height: 4px;
  }
}
</style>
